// 创建 “导航栏-框架”
var Frame = document.createElement('viod-box');

var Home = document.createElement('viod-box');
var Discover = document.createElement('viod-box');
var Activity = document.createElement('viod-box');
var Profile = document.createElement('viod-box');

// 样式-关联：
Frame.className = "Frame";

Home.className = "Home";
Discover.className = "Discover";
Activity.className = "Activity";
Profile.className = "Profile";

// 上弦：
document.body.appendChild(Frame);

Frame.appendChild(Home);
Frame.appendChild(Discover);
Frame.appendChild(Activity);
Frame.appendChild(Profile);

// 内容：
Frame.className = "Frame";

Home.innerText = "主页";
Discover.innerText = "推荐";
Activity.innerText = "互动";
Profile.innerText = "我的";

// 交互：

// 添加鼠标移入事件
Home.addEventListener('mouseenter', function() {
  this.style.borderTop = '3px solid rgba(43, 248, 248, 0.93)'; // 上边框变红色
  this.style.backgroundColor = '#000000c0';
});
Discover.addEventListener('mouseenter', function() {
  this.style.borderTop = '3px solid rgba(43, 248, 248, 0.93)'; // 上边框变红色
  this.style.backgroundColor = '#000000c0';
});
Activity.addEventListener('mouseenter', function() {
  this.style.borderTop = '3px solid rgba(43, 248, 248, 0.93)';
  this.style.backgroundColor = '#000000c0';
});
Profile.addEventListener('mouseenter', function() {
  this.style.borderTop = '3px solid rgba(43, 248, 248, 0.93)';
  this.style.backgroundColor = '#000000c0';
});

// 添加鼠标移出事件
Home.addEventListener('mouseleave', function() {
  this.style.borderTop = '3px solid transparent'; // 恢复透明或原始颜色
  this.style.backgroundColor = '#111';
});
Discover.addEventListener('mouseleave', function() {
  this.style.borderTop = '3px solid transparent'; // 恢复透明或原始颜色
  this.style.backgroundColor = '#111';
});
Activity.addEventListener('mouseleave', function() {
  this.style.borderTop = '3px solid transparent'; // 恢复透明或原始颜色
  this.style.backgroundColor = '#111';
});
Profile.addEventListener('mouseleave', function() {
  this.style.borderTop = '3px solid transparent'; // 恢复透明或原始颜色
  this.style.backgroundColor = '#111';
});

// 点击事件：
Home.addEventListener('click', function() {
    console.log('1');
});
Discover.addEventListener('click', function() {
    console.log('2');
});
Activity.addEventListener('click', function() {
    console.log('3');
});
Profile.addEventListener('click', function() {
    console.log('4');
});